import * as React from 'react'
import { Layout, Row, Col } from 'antd/es'
import LeftSider from './LeftSider'
import QuizDescription from './QuizDescription'
import QuizChart from './QuizChart'
import { connect } from 'react-redux'
import { getLogicQuizItem, getLogicReviewQuiz, submitLogicQuizItemAnswer, updateLogicQuizItemAnswer, submitLogicReviewQuiz } from '../../../actions/assignment'
import QuizSubmitBox from './QuizSubmitBox'
const { Content, Sider } = Layout

class LogicQuizBody extends React.Component<any> {
    state = {
        selectQuizItemId: 1,
        logicReviewQuizId: undefined
    }

    updateQuizItemId = (selectQuizItemId: any) => {
        this.setState({ selectQuizItemId })
    }

    componentDidMount = () => {
        const { quizId, selectedQuizzes } = this.props
        const quiz = selectedQuizzes[0]
        const { assignmentId } = quiz
        this.props.getLogicReviewQuiz(assignmentId, quizId, () => {
            const { logicReviewQuiz } = this.props
            this.setState({ logicReviewQuizId: logicReviewQuiz.id })
        })
    }

    isLoad = () => {
        const { logicReviewQuizId } = this.state
        return logicReviewQuizId === undefined ? false : true
    }

    render() {
        const { logicQuizItem, quizId, selectedQuizzes, taskId, logicReviewQuiz, logicQuizSubmission } = this.props
        const { isExample, initializedBox, descriptionZh, chartPath, questionZh, exampleAnswer, quizItemId, answer } = logicQuizItem
        const { selectQuizItemId } = this.state
        const quiz = selectedQuizzes[0]
        const { assignmentId } = quiz
        return <Layout>
            <Sider width={200} style={{ backgroundColor: 'white' }}>
                {
                    this.isLoad()
                        ? <LeftSider
                            quizId={quizId}
                            assignmentId={assignmentId}
                            taskId={taskId}
                            selectQuizItemId={selectQuizItemId}
                            logicReviewQuiz={logicReviewQuiz}
                            logicQuizSubmission={logicQuizSubmission}
                            updateQuizItemId={this.updateQuizItemId}
                            getLogicReviewQuiz={this.props.getLogicReviewQuiz}
                            getLogicQuizItem={this.props.getLogicQuizItem}
                            submitLogicQuizItemAnswer={this.props.submitLogicQuizItemAnswer}
                            submitLogicReviewQuiz={this.props.submitLogicReviewQuiz}
                        />
                        : ''
                }
            </Sider>
            <Content style={{ backgroundColor: 'white' }}>
                <Row>
                    <Col span={16}>
                        <QuizDescription
                            isExample={isExample}
                            initializedBox={initializedBox}
                            description={descriptionZh}
                        />
                        <QuizSubmitBox
                            quizId={quizId}
                            assignmentId={assignmentId}
                            quizItemId={quizItemId}
                            selectQuizItemId={selectQuizItemId}
                            isExample={isExample}
                            exampleAnswer={exampleAnswer}
                            answer={answer}
                            questionDescription={questionZh}
                            logicReviewQuiz={logicReviewQuiz}
                            logicQuizSubmission={logicQuizSubmission}
                            updateQuizItemId={this.updateQuizItemId}
                            getLogicQuizItem={this.props.getLogicQuizItem}
                            submitLogicQuizItemAnswer={this.props.submitLogicQuizItemAnswer}
                            updateLogicQuizItemAnswer={this.props.updateLogicQuizItemAnswer}
                        />
                    </Col>
                    <Col span={8}>
                        <QuizChart chartPath={chartPath} />
                    </Col>
                </Row>
            </Content>
        </Layout>
    }
}

const mapStateToProps = ({ logicQuizItem, logicReviewQuiz, logicQuizSubmission }:
    { logicQuizItem: any, logicReviewQuiz: any, logicQuizSubmission: any }) => {
    return {
        logicQuizItem,
        logicReviewQuiz,
        logicQuizSubmission
    }
}

const mapDispatchToProps = (dispatch: Function) => ({
    getLogicQuizItem: (assignmentId: number, quizId: number, quizItemOrderNum: any, callback: Function) => dispatch(getLogicQuizItem(assignmentId, quizId, quizItemOrderNum, callback)),
    getLogicReviewQuiz: (assignmentId: number, quizId: number, callback: Function) => dispatch(getLogicReviewQuiz(assignmentId, quizId, callback)),
    submitLogicReviewQuiz: (taskId: number, assignmentId: number, quizId: number) => dispatch(submitLogicReviewQuiz(taskId, assignmentId, quizId)),
    submitLogicQuizItemAnswer: (data: any) => dispatch(submitLogicQuizItemAnswer(data)),
    updateLogicQuizItemAnswer: (data: any) => dispatch(updateLogicQuizItemAnswer(data))
})

export default connect(mapStateToProps, mapDispatchToProps)(LogicQuizBody)